<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script type="text/javascript" src="dataFormat.js"></script>
<script type="text/javascript" src="utility.js"></script>
<script>

// url for the visual page of google calendar ( your calendar )
var calendar = "http://www.google.com/calendar/render";

// global javascript object for background page
var worker = undefined;

// current visible appointment / index
var currentEntryIdx = 0;
var currentEntry;

// initialize toolstrip and communication with backgroundPage
function init()
{
    worker = chrome.extension.getBackgroundPage();
    if ( worker.loggedIn && worker.hasEntries() )
    {
        toggleLoginState(true);
        updateToolstripEntry(0);
    }
    else
    {
        toggleLoginState(false);
    }
}

// ui stuff
function toggleLoginState(flag) {
  if ( flag ) {
    $("notLoggedIn").style.display = "none";
    $("loggedIn").style.display = "";
    
  } else {
    $("loggedIn").style.display = "none";
    $("notLoggedIn").style.display = "";     
  }
}

function updateToolstripEntry(idx) {
  if ( idx >= 0 && idx < worker.entries.length ) // check IDX
  {
	if (  !currentEntry || 
           currentEntry.id != worker.entries[idx].id || 
           currentEntry.recid != worker.entries[idx].recid) 
    {
        currentEntryIdx = idx;
		currentEntry = worker.entries[currentEntryIdx];		
		startFlip();
    }
  }
}

function goToCalendar() {
    if ( worker.loggedIn == true )
    {
        chrome.tabs.create({url: calendar});
    }
    else
    {
        chrome.toolstrip.expand({url: chrome.extension.getURL("loginPage.html"), height: 250});
    }
}

function openOptions()
{
        window.open(chrome.extension.getURL("optionPage.html"),"_blank",
                "directories=no,height=595,width=500,left=300,top=200,location=no,"+
                "menubar=no,scrollbars=no,status=no,titlebar=no,toolbar=no");  
}

// animation
function startFlip() {
  $("nextEntry").className = 'mid-flip';
  setTimeout(midFlip, 500);
}

function midFlip() {
  $("nextEntry").className = 'post-flip';  
  $("nextEntry").innerHTML = currentEntry.title + " @ " + 
    shortDateString(worker.cultureInfo, currentEntry.start, currentEntry.end);
  setTimeout(endFlip, 500);
}

function endFlip() {
  $("nextEntry").className = 'base-flip';  
}

function sadFace()
{
	$("nextEntry").innerHTML = ":("; 
}

function showNextEntry() {
  if ( !worker.loggedIn ) return;
  updateToolstripEntry(( currentEntryIdx + 1 ) % worker.entries.length);
}

function showPrevEntry() 
{
  if ( !worker.loggedIn ) return;
  updateToolstripEntry(( currentEntryIdx - 1 ) % worker.entries.length);
}

function btnOver() {
	if ( currentEntry )
	{
		$("nextEntry").title = currentEntry.title + "\nStart: " + currentEntry.start +
			"\nEnd: " + currentEntry.end + "\nWhere: " + currentEntry.where;
	}
}

</script>
</head>
<body onload="init()">

    <div id="prev" class="toolstrip-button" onclick="showPrevEntry()">
      <span id="prevtext">&lt;</span>
    </div>    
    
    <div id="optionEntry" class="toolstrip-button" onclick="openOptions()">
        <img src="icons/wrench-16.png" style="width:auto; height:auto">    
    </div>
    
    <div id="currententry" class="toolstrip-button" onclick="goToCalendar()" onmouseover="btnOver()">
        <!--<img src="calendar.png" style="width:auto; height:auto"> -->
        <span id="notLoggedIn" style="display: inline-block;">Login</span>
        <span id="loggedIn" style="display: none">
            <span style="display: inline-block;" id="nextEntry" class="base-flip"></span>
        </span>
    </div>    
    
    <div id="next" class="toolstrip-button" onclick="showNextEntry()">
        <span id="nexttext">&gt;</span>
    </div>    
</body>
</html>
